{{template "layout/layout_admin.html" .}}

{{define "style"}}
<style>
    .green{
        color: #4db14d;
    }
    .orange{
        color:#ff5500;
    }
    .red{
        color: #ff0000;
    }
    .search-field{
        margin-top: 5px;
        padding: 0 20px;
        float: left;
    }
</style>
{{end}}
{{define "content"}}

<div class="layui-fluid main" style="margin:15px;">


    <fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
        <legend>邮件发送日志</legend>
    </fieldset>

    <div class="kit-table">
        <form class="layui-form" lay-filter="kit-search-form">
            <div class="kit-table-header">
                <div class="search-field">
                    <select name="appid" lay-filter="select-appid">
                        <option value="">所有</option>
                        {{range .allApps}}
                            <option value="{{.Appid}}" {{if eq $.appid .Appid}}selected{{end}}>{{.Name}}</option>
                        {{end}}
                    </select>
                </div>
                <div class="search-field">
                    <select name="dostatus"  lay-filter="select-dostatus">
                        <option value="">所有</option>
                        <option value="1" {{if eq $.dostatus "1"}}selected{{end}}>成功</option>
                        <option value="0" {{if eq $.dostatus "0"}}selected{{end}}>待发送</option>
                        <option value="-1" {{if eq $.dostatus "-1"}}selected{{end}}>失败</option>
                    </select>
                </div>
                <div class="kit-search-inputs">
                    <div class="kit-search-keyword">
                        <input type="text" class="layui-input" name="keyword" placeholder="搜索标题关键字.." value="{{if .keyword}}{{.keyword}}{{end}}" />
                        <button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <table id="main_table" lay-filter="main_table"></table>

</div>





{{end}}


{{define "script"}}
<script type="text/html" id="tableTool">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="view">查看详情</a>
</script>
<script type="text/html" id="viewBox">
    <form  class="layui-form popform"  action="" method="post" style='margin:10px 10px 0 20px ;'>
        <div class="layui-form-item">
            <label class="layui-form-label">邮件标题</label>
            <div class="layui-input-block">
                <input type="text" readonly  lay-verify="required" value="${title}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">收件人</label>
            <div class="layui-input-block">${to}</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">抄送人</label>
            <div class="layui-input-block">${cc}</div>
        </div>

        {&if bcc}
        <div class="layui-form-item">
            <label class="layui-form-label">秘送人</label>
            <div class="layui-input-block">${bcc}</div>
        </div>
        {&/if}

        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <pre class="layui-code">$${content}</pre>
            </div>
        </div>
    </form>
</script>
<script>

    var inArray = function(fstr){
        var arr = mcIds
        var i = arr.length;
        while (i--) {
            if (arr[i] == fstr) {
                return "checked";
            }
        }
        return "";
    }
    juicer.register('inArray', inArray);

    layui.use(['jquery','table','form','code'], function() {
    {{template "layout/baseJs.html" .}}
        var table = layui.table,
                $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                laytpl = layui.laytpl;

        layui.code(); //引用code方法
        var dostatus = $("select[name='dostatus'] option:selected").val();
        var appid = $("select[name='appid'] option:selected").val();
        var keyword = $("input[name='keyword']").val();
        form.on('select(select-appid)', function(data){
            var dostatus = $("select[name='dostatus'] option:selected").val();
            var appid = data.value
            var keyword = $("input[name='keyword']").val()
            var url = '{{urlfor "LogsController.LogsList"}}?dostatus='+dostatus+'&appid='+appid+'&kw='+keyword;
            location.href = url;
        });

        form.on('select(select-dostatus)', function(data){
            var dostatus = data.value;
            var appid = $("select[name='appid'] option:selected").val();
            var keyword = $("input[name='keyword']").val();
            var url = '{{urlfor "LogsController.LogsList"}}?dostatus='+dostatus+'&appid='+appid+'&kw='+keyword;
            location.href = url;
        });
        form.on('submit(search)', function(data){
            var dostatus = $("select[name='dostatus'] option:selected").val();
            var appid = $("select[name='appid'] option:selected").val();
            var keyword = $("input[name='keyword']").val();

            var url = '{{urlfor "LogsController.LogsList"}}?dostatus='+dostatus+'&appid='+appid+'&kw='+keyword;
            location.href = url;


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        table.render({
            elem: '#main_table'
            ,height: 550
            ,url: '{{urlfor "LogsController.LogsListApi"}}?dostatus='+dostatus+'&appid='+appid+'&kw='+keyword //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'app_name', title: '业务线', fixed: 'left'}
                ,{field: 'title', title: '邮件标题', fixed: 'left'}
                ,{field: 'to', title: '收件人', fixed: 'left'}
                ,{field: 'cc', title: '抄送人', fixed: 'left'}
                ,{field: 'dostatus', title: '发送状态', fixed: 'left', templet: function(d){
                        if(d.dostatus == 1){
                            return "<span class='green'>成功</span>";
                        }else if(d.dostatus == -1){
                            return "<span class='red'>成功</span>"
                        }else{
                            return "<span class='orange'>待发送</span>"
                        }
                    }}
                ,{field: 'created_at', title: '发送时间', fixed: 'left'}
                ,{fixed: 'right', title: '操作', width:150, align:'center', toolbar: '#tableTool'}
            ]]
        });

        //监听工具条
        table.on('tool(main_table)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;

            var id = data.id
            if(layEvent === 'view'){ //删除

                var url='{{urlfor "LogsController.LogInfo"}}';
                layer.load(2);
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {id:data.id},
                    success: function(json){
                        layer.closeAll('loading');
                        if(json.status != 200){
                            QI.errorAlert(json.info);
                            return false;
                        }
                        console.log(json);

                        var tplData = json.data;
                        var gettpl = document.getElementById('viewBox').innerHTML;
                        var layHtml = juicer(gettpl, tplData);


                        layer.open({
                            type: 1,
                            content: layHtml,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['850px', '500px'], //宽高
                            btn:['确认'],
                        });


                    },
                    error:function(e){
                        layer.closeAll('loading');
                        QI.errorAlert('系统出小差了（'+e.statusText+'）');
                    }
                });





            }
        });


    });
</script>

{{end}}
